<template>
    <div class="isDialog">
        <el-form :model="userQuery" ref="form" label-width="100px" :inline="true">
            <el-form-item label="登录名称：">
                <el-input v-model="userQuery.loginName" placeholder="输入登录名称模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名：">
                <el-input v-model="userQuery.username" placeholder="输入用户姓名模糊查询"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- v-loading.fullscreen="fullscreenLoading" -->
                <el-button type="primary" @click="openFullScree">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="24" style="margin-left: 0;">
            <el-col :span="1.6" :offset="0">
                <el-button type="primary" size="default" v-perm:system:user:userInsert="userInsert">
                    <el-icon color="white">
                        <Plus />
                    </el-icon>
                    <span style="margin-left: 4px;">新增</span>
                </el-button>
            </el-col>
            <el-col :span="4" :offset="0">
                <el-dropdown @command="handleCommand">
                    <el-button>
                        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="delete">
                                <el-icon>
                                    <Delete />
                                </el-icon>删除
                            </el-dropdown-item>
                            <el-dropdown-item command="enable">
                                <el-icon>
                                    <CircleCheck />
                                </el-icon>启用
                            </el-dropdown-item>
                            <el-dropdown-item command='disable'>
                                <el-icon>
                                    <CircleClose />
                                </el-icon>禁用
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </el-col>
        </el-row>
        <el-table ref="tableRef" :data="page.records" border stripe max-height="489px" style="margin-top: 30px;">
            <el-table-column type="selection" width="40px" />
            <el-table-column type="index" label="#" :index="indexMethod" width="47px" align="center" />
            <el-table-column label="操作" width="264px" align="center">
                <template #default="scope">
                    <el-button type="primary" size="default" link :row="scope.row"
                        v-perm:system:user:userUpdate="toUpdate">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-popconfirm title="确定删除该用户？" confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                        @confirm="userRemoveBatch(scope.row, null)">
                        <template #reference>
                            <el-button type="primary" size="default" link>删除</el-button>
                        </template>
                    </el-popconfirm>

                    <el-divider direction="vertical" />
                    <el-popconfirm title="确定重置密码为123456吗？" confirm-button-text="确定" cancel-button-text="取消"
                        :icon="InfoFilled" @confirm="resetPass(scope.row)">
                        <template #reference>
                            <el-button type="primary" size="default" link>重置密码</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-table-column label="登录名称" prop="loginName" />
            <el-table-column label="用户姓名" prop="username" />
            <el-table-column label="用户类型" prop="leaderFlag">
                <template #default="scope">
                    <span v-if="scope.row.roleName != '租户'">
                        普通
                    </span>
                    <span v-else>
                        {{ scope.row.roleName }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="角色" prop="roleName"></el-table-column>
            <!-- <el-table-column label="机构" prop="organName"></el-table-column> -->
            <el-table-column label="是否经理" prop="leaderFlag">
                <template #default="scope">
                    <span v-if="scope.row.leaderFlag == 0">
                        否
                    </span>
                    <span v-else>
                        是
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="电话号码" prop="phonenum" />
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0" type="success" size="default" effect="dark">正常</el-tag>
                    <el-tag v-else type="danger" size="default" effect="dark">禁用</el-tag>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="page.current" v-model:page-size="page.size" :page-sizes="[2, 5, 10, 20]"
            :default-page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
            :page-count="page.pages" @change="getUsers()" />

        <el-dialog :title="dialogTitle" v-model="visible" :destroy-on-close="true" draggable width="42%"
            :before-close="close">
            <router-view @close="close" :data="data"></router-view>
        </el-dialog>
    </div>

</template>

<script lang="ts" setup>
import { ArrowDown, InfoFilled } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { withLoading } from '@/hooks/loading'
import request from '@/api/request';
import router from '@/router';
import { ElMessage } from 'element-plus';
let dialogTitle = ref('');
let visible = ref(false)
let data = ref({})
let tableRef = ref(null)

// 分页对象
const page = ref({
    current: null, // 当前页码
    size: null, // 每页条数
    total: null, // 总记录数
    pages: null, // 总页数
    records: []
})

class query {
    current = 1;
    size = 5;
    loginName = null;
    username = null;
}

// 分页条件对象
let userQuery = ref(new query())

// 条件查询
const openFullScree = async () => {
    withLoading(getUsers, null)()
};

let getUsers = () => {
    userQuery.value.current = page.value.current;
    userQuery.value.size = page.value.size;
    request.get('user/page', {
        params: {
            ...userQuery.value
        }
    }).then(resp => {
        if (resp.code == 200) {
            page.value = resp.data
        }
    })
};


// 批量操作
let handleCommand = (command: String) => {
    let tableData = tableRef.value.getSelectionRows();
    if (tableData.length <= 0) {
        ElMessage.warning("请选择一条记录")
        return;
    }
    let userLoginNames = []
    tableData.forEach((val, index) => {
        userLoginNames.push(val.loginName)
    })
    switch (command) {
        case "delete":
            userRemoveBatch(null, userLoginNames);
            break;
        case "enable":
            upUserStatus(userLoginNames, 0)
            break;
        case "disable":
            upUserStatus(userLoginNames, 2)
            break;
    }
};

let userRemoveBatch = (row, array) => {
    let userLoginNames = []
    if (array) {
        userLoginNames = array
    } else {
        userLoginNames = [row.loginName]
    }

    request.delete(`user/userRemoveBatch/${userLoginNames}`).then(resp => {
        if (resp.code == 200) {
            openFullScree()
        }
    })
}

let upUserStatus = (userLoginNames: Array<String>, stater: any) => {
    request.put(`user/upUserStatus/${userLoginNames}/${stater}`).then(resp => {
        if (resp.code == 200) {
            ElMessage({
                message: resp.data,
                type: 'success'
            })
            openFullScree()
        }
    })
}

/**
 * 角色新增
 * @param p 权限对象
 */
let userInsert = (p: any) => {
    dialogTitle.value = p.cname
    router.push(p.path)
    visible.value = true
};

/**
 * 角色修改
 * @param p 权限对象
 * @param row 当前行数据
 */
let toUpdate = (p: any, row: any) => {
    dialogTitle.value = p.cname
    router.push(p.path)
    visible.value = true
    data.value = row
};

/**
 * 重置密码
 * @param row 当前数据对象
 */
let resetPass = (row: any) => {
    request.post("user/resetPass", row.id, {
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(resp => {
        if (resp.code === 200) {
            ElMessage({
                message: resp.data,
                type: 'success'
            })
        }
    })
};

/**
 * 清空搜索数据
 */
const reset = () => {
    userQuery = ref(new query())
    openFullScree()
};

const indexMethod = (index: number) => {
    return index + 1;
};

let close = () => {
    visible.value = false;
    data = ref({})
    getUsers()
};

onMounted(() => {
    getUsers()

});
</script>

<style scoped></style>
